Review: Create a low-fidelity prototype for your responsive website 複習：為響應式網站建立低保真原型

定義使用者流程（User Flow）

在原型設計前，首先確定使用者的任務目標，並自問：

• 使用者要完成什麼任務？

• 使用者會如何從一個頁面跳轉到另一個頁面？

• 使用者是否能前後導航？

• 使用者是否能從多個入口進入流程？

示例任務（購物流程）：

1. 進入"女裝"頁面

2. 選擇一件 T 恤

3. 選擇顏色和尺碼

4. 加入購物車

5. 進入結賬流程

6. 輸入郵箱

7. 選擇送貨方式

8. 輸入支付資訊

9. 點選"下訂單"

在 Figma 中設定原型（Prototype）

1. 切換至 Prototype 模式

• 開啟 Figma 專案

• 點選右側側欄的"Prototype"標籤

2. 連線頁面（幀）

操作步驟：

• 選中流程中第一個互動元素

• 拖動右側藍色圓點箭頭至目標頁面/元件

• 鬆開滑鼠完成連線

• 重複此操作直到整個使用者流程連線完畢

示例連線圖：主頁 ➝ 女裝頁面 ➝ 產品頁 ➝ 購物車頁 ➝ 結賬頁

建立互動清單（Checklist）

確保原型涵蓋以下功能：

• 使用者可以向前/向後導航

• 使用者可以從特定入口點開始

• 使用者能識別流程的終點

• 完成後能返回起點或主頁面

• 至少有四個相連的頁面構成完整流程

測試原型（Preview）

• 點選右上角的 ▶️ 播放按鈕預覽原型

• 手動點選互動按鈕，確保流程順暢無誤

• 如果發現錯誤，回到 Prototype 模式修復連線

關鍵回顧問題（Review Questions）

• 我是否使用了 Prototype 模式？

• 我的使用者流程有多少個頁面？是否包含完整路徑？

• 我選擇的入口點是否合理？

• 我設定了哪幾種互動？是否包括前進、後退、完成後返回等？

• 是否為使用者提供了清晰的導航提示？

• 使用者能否識別何時流程結束？